<template>
  <div style="padding: 10px 20px;">
    <div class="block">
      <el-date-picker
        v-model="valueDate"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleDateChange">
      </el-date-picker>
      <el-button
        type="primary"
        plain
        icon="el-icon-search"
        size="small"
        @click="handleQuery"
        style="margin-left: 10px;"
      >搜索
      </el-button>
      <el-button
        type="primary"
        plain
        icon="el-icon-download"
        size="small"
        @click="handleExport"
        style="margin-left: 10px;"
      >导出
      </el-button>
    </div>

    <el-tabs v-model="activeName"  @tab-click="onTabClick">
      <el-tab-pane label="工单统计表" name="first">
        <el-table stripe v-loading="loading" :data="WorkOrderStatisList" style="width: 100%">
          <el-table-column prop="date" label="全量投诉解决通报" align="center">
            <el-table-column label="区县" width="100" align="center" prop="complaintDistrict"></el-table-column>
            <el-table-column label="投诉总量" min-width="100" align="center" prop="complaintNumber"></el-table-column>
            <el-table-column label="已解决" min-width="80" align="center" prop="resolvedNumber"></el-table-column>
            <el-table-column label="解决率" min-width="80" align="center" prop="resolvedRate">
              <template slot-scope="scope">
                <span v-html="formatPercentage(scope.row.resolvedRate)"></span>
              </template>
            </el-table-column>
            <el-table-column label="愿意评价数量" min-width="100" align="center" prop="evaluateNumber"></el-table-column>
            <el-table-column label="10分评价率" min-width="100" align="center" prop="tenEvaluateRate">
              <template slot-scope="scope">
                <span v-html="formatPercentage(scope.row.tenEvaluateRate)"></span>
              </template>
            </el-table-column>
            <el-table-column label="本周闭环量" min-width="100" align="center" prop="weekClosedLoopNumber"></el-table-column>
          </el-table-column>
          <el-table-column prop="name" label="未解决投诉方案分类" align="center">
            <el-table-column label="未解决数量" min-width="100" align="center" prop="unresolvedNumber"></el-table-column>
            <el-table-column label="规划" min-width="80" align="center" prop="planNumber"></el-table-column>
            <el-table-column label="建设" min-width="80" align="center" prop="buildNumber"></el-table-column>
            <el-table-column label="维护" min-width="80" align="center" prop="maintainNumber"></el-table-column>
            <el-table-column label="优化" min-width="80" align="center" prop="optimizationNumber"></el-table-column>
            <el-table-column label="待勘察" min-width="80" align="center" prop="beSurveyedNumber"></el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="超时统计表" name="second">
        <el-table stripe v-loading="loading" :data="OvertimeStatisList" style="width: 100%">
          <el-table-column prop="date" label="处理超时通报" align="center">
            <el-table-column label="区县" width="100" align="center" prop="complaintDistrict"></el-table-column>
            <el-table-column label="投诉总量" min-width="100" align="center" prop="complaintNumber"></el-table-column>
            <el-table-column label="未闭环数量" min-width="100" align="center" prop="unclosedLoopNumber"></el-table-column>
            <el-table-column label="接单超时数量" min-width="100" align="center" prop="orderOvertimeNumber"></el-table-column>
            <el-table-column label="预约超时数量" min-width="100" align="center" prop="reserveOvertimeNumber"></el-table-column>
            <el-table-column label="现场处理及方案输出超时数量" min-width="180" align="center" prop="processSolutionOvertimeNumber"></el-table-column>
            <el-table-column label="方案审核超时数量" min-width="100" align="center" prop="programExamineOvertimeNumber"></el-table-column>
            <el-table-column label="方案施工超时数量" min-width="100" align="center" prop="reportClosedLoopOvertimeNumber"></el-table-column>
            <el-table-column label="整体超时率" min-width="100" align="center" prop="overallOvertimeRate">
              <template slot-scope="scope">
                <span v-html="formatPercentage(scope.row.overallOvertimeRate)"></span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getWorkOrderList, getOvertimeList} from "@/api/system/complaint";

export default {
  dicts: ['complaint_district'],
  data(){
    return{
      activeName:'first',
      // 遮罩层
      loading: true,
      tableData: [],
      WorkOrderStatisList: [],
      OvertimeStatisList: [],
      valueDate: [],
      // 查询参数
      queryParams: {
        startDate: null,
        endDate: null,
      },
    }
  },
  created() {
    this.getWorkOrder();
    this.getOvertime();
  },
  methods: {
    /** 查询工单统计表 */
    getWorkOrder() {
      this.loading = true;
      getWorkOrderList(this.queryParams).then(response => {
        this.WorkOrderStatisList = response.data;
        this.loading = false;
      });
    },
    /** 查询工单统计表 */
    getOvertime() {
      this.loading = true;
      getOvertimeList(this.queryParams).then(response => {
        this.OvertimeStatisList = response.data;
        this.loading = false;
      });
    },
    /** 当标签页被点击时触发的方法 */
    onTabClick(tab, event) {
      /** 根据当前激活的标签页来获取数据 */
      if (this.activeName === 'first') {
        this.getWorkOrder();
      } else if (this.activeName === 'second') {
        // 如果第二个标签页也需要加载数据，可以在这里添加逻辑
        // 例如：this.getOverdueStatistics();
        this.getOvertime();
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.activeName === 'first') {
        this.download('system/complaint/workOrderStatisExport', {
          ...this.queryParams
        }, `工单统计表-${this.formatLocalDate(new Date())}.xlsx`)
      } else if (this.activeName === 'second') {
        this.download('system/complaint/overtimeStatisExport', {
          ...this.queryParams
        }, `超时统计表-${this.formatLocalDate(new Date())}.xlsx`)
      }
    },
    formatLocalDate(date) {
      return (
        date.getFullYear() + '-' +
        (date.getMonth() + 1).toString().padStart(2, '0') + '-' +
        date.getDate().toString().padStart(2, '0')
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      const [start, end] = this.valueDate;
      let startDate = start ? new Date(start.getTime() + 86400000).toISOString().slice(0, 10) : null; // 添加一天的时间（单位为毫秒）
      let endDate = end ? new Date(end.getTime() + 86400000*2).toISOString().slice(0, 10) : null; // 添加一天的时间（单位为毫秒)
      // 如果开始时间和结束时间都为空，则清空查询参数
      if (!start && !end) {
        delete this.queryParams.startDate;
        delete this.queryParams.endDate;
      } else {
        this.queryParams.startDate = startDate;
        this.queryParams.endDate = endDate;
      }
      this.queryParams.pageNum = 1;
      if (this.activeName === 'first') {
        this.getWorkOrder();
      } else if (this.activeName === 'second') {
        this.getOvertime();
      }
    },
    handleDateChange(value) {
      if (!value || value.length === 0) {
        this.queryParams.startDate = null;
        this.queryParams.endDate = null;
        // 在这里立即调用 getWorkOrder()
        if (this.activeName === 'first') {
          this.getWorkOrder();
        } else if (this.activeName === 'second') {
          this.getOvertime();
        }
      }
    },
    formatPercentage(number) {
      return `${(number).toFixed(2)}%`;
    },
  }
}

</script>


<style scoped lang="scss">

</style>
